<template>
  <el-row>
    <el-col :span="12">
      <draggable class=""
                 :list="list1"
                 tag="div"
                 :options="{group: {name: 'people', pull: 'clone', put: false}, animation: 300, sort: true, ghostClass: 'ghost'}"
                 @end="end"
                 @start="start"
                 :move="move"
                 :clone="clone"
      >
        <transition-group name="fade" tag="div" style="width: 200px; height: 200px; background: #edff2b;">
          <div v-for="element in list1"
               :key="element.id"
               :style="{width: '200px', height: '50px', border: '1px solid red', cursor: 'move'}"
          >
            {{element.name}}
          </div>
        </transition-group>
      </draggable>

      <div style="width: 200px; height: 200px; border: 1px solid #000;">
        {{showLabel()}}
      </div>
    </el-col>
    <el-col :span="12">
      <draggable class=""
                 v-model="list2"
                 tag="div"
                 :options="{group: {name: 'people', pull: true, put: true},animation: 300,sort: true,ghostClass: 'ghost'}"
                 @add="add"
      >
        <transition-group name="fade" tag="div" style="width: 200px; height: 200px; background: #edff2b;">
          <div v-for="element in list2"
               :key="element.id"
               :style="{width: '200px', height: '50px', border: '1px solid red', cursor: 'move'}"
          >
            {{element.name}}
          </div>
        </transition-group>
      </draggable>

      <div style="width: 200px; height: 200px; border: 1px solid #000;">
        {{JSON.stringify(list2)}}
      </div>
    </el-col>
  </el-row>

</template>

<script>
  import Draggable from 'vuedraggable'
  export default {
    name: "DraggableDemo",
    components: {
      Draggable
    },
    data() {
      return {
        list1: [{
          id: 1,
          name: 'A'
        }, {
          id: 2,
          name: 'B'
        }, {
          id: 3,
          name: 'C'
        }, {
          id: 4,
          name: 'D'
        }],
        list2: [],
        isDragging: false,
        delayedDragging: false
      }
    },

    methods: {
      start ({oldIndex}) {
        console.log('start1', oldIndex, this.list1)
        this.isDragging = true
      },
      end (evt) {
        console.log('end1', evt)
        this.isDragging = false
      },
      move({ relatedContext, draggedContext }) {
        const relatedElement = relatedContext.element;
        const draggedElement = draggedContext.element;
        return ((!relatedElement || !relatedElement.fixed) && !draggedElement.fixed);
      },
      clone(evt) {
        const key = Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
        return {id: key, name: evt.name};
      },
      add(evt) {
        console.log('add2', evt)
      },
      showLabel() {
        return JSON.stringify(this.list1)
      },
    },
    watch: {
      isDragging: {
       handler(newValue) {
         if (newValue) {
           this.delayedDragging = true;
           return;
         }
         this.$nextTick(() => {
           this.delayedDragging = false;
         });
       }
      }
    }
  }
</script>
